<template>
	<view class="artworks-list-item-container">
		<view class="artworks-item" v-for="(item,index) in artworksList" :key="index"
			@click="handleArtworks(item.id,index)">
			<u-image class="image" :fade="false" height="160rpx" :lazyLoad="true" mode="aspectFill"
				:showMenuByLongpress="false" :src="item.wx_cover_url||item.cover_url" width="160rpx">
				<u-loading color="#7275fb" size="36" slot="loading"></u-loading>
			</u-image>
			<view class="show-status-container">
				<view class="wait" v-if="item.audit_status==='review'">
					<text>审核中</text>
					<u-icon name="clock" size="16" color="#f29100"></u-icon>
				</view>
				<block v-else>
					<view class="reject" v-if="item.audit_status==='reject'">
						<text>驳回</text>
						<u-icon name="error-circle" size="16" color="#fa3534"></u-icon>
					</view>
					<block v-else>
						<view class="reject" v-if="item.audit_status==='fail'">
							<text>下架</text>
							<u-icon name="error-circle" size="16" color="#fa3534"></u-icon>
						</view>
						<block v-else>
							<view v-if="item.audit_status==='success'" class="flex alcenter">
								<u-icon name="download" size="22" color="#fff"></u-icon>
								<text style="padding-left:6rpx;">{{item.download_num}}</text>
							</view>
						</block>
					</block>
				</block>
			</view>
			<image class="checkbox" mode="scaleToFill" src="/static/icon/unchecked.png" v-if="isBatch&&!item.checked">
			</image>
			<block v-else>
				<image class="checkbox" mode="scaleToFill" src="/static/icon/checked.png" v-if="isBatch&&item.checked">
				</image>
			</block>
			<view class="is_top" v-if="item.is_top==='1'">
				<text>置顶</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			artworksList: {
			    type: Array,
			    default: function() {
			        return [];
			    }
			},
			isBatch: {
			    type: Boolean,
			    default: !1
			},
			isArtworks: {
			    type: String,
			    default: "0"
			}
		},
		data() {
			return {
				name: "列表"
			}
		},
		// computed: {
		//     bottomSafeHeight: function() {
		//         return e.getStorageSync("deviceInfo").bottomSafeAreaHeight;
		//     }
		// },
		methods: {
			handleArtworks(n, e) {
				this.isBatch ? this.$emit("handleCheckBox", e) : this.$emit("handleArtworks", n);
			}
		}
	}
</script>

<style lang="scss">
	.artworks-list-item-container {
	    display: flex;
	    flex-wrap: wrap;
	}
	
	.artworks-list-item-container .artworks-item {
	    border: 1rpx solid #eaeaea;
	    border-radius: 8rpx;
	    height: 160rpx;
	    margin-bottom: 24rpx;
	    margin-left: 7.5rpx;
	    margin-right: 8rpx;
	    overflow: hidden;
	    position: relative;
	    width: 160rpx;
	}
	
	.artworks-list-item-container .artworks-item .show-status-container {
	    background: rgba(0,0,0,.6);
	    bottom: 0;
	    color: #fff;
	    display: flex;
	    font-size: 24rpx;
	    height: 44rpx;
	    left: 0;
	    line-height: 44rpx;
	    margin: auto;
	    padding-left: 10rpx;
	    padding-right: 10rpx;
	    position: absolute;
	    right: 0;
	    width: 100%;
	    z-index: 1;
	}
	
	.artworks-list-item-container .artworks-item .show-status-container .wait {
	    color: #f29100;
	}
	
	.artworks-list-item-container .artworks-item .show-status-container .reject,.artworks-list-item-container .artworks-item .show-status-container .wait {
	    -webkit-box-pack: justify;
	    display: flex;
	    justify-content: space-between;
	    width: 100%;
	}
	
	.artworks-list-item-container .artworks-item .show-status-container .reject {
	    color: #fa3534;
	}
	
	.artworks-list-item-container .artworks-item .checkbox {
	    height: 50rpx;
	    position: absolute;
	    right: 10rpx;
	    top: 10rpx;
	    width: 50rpx;
	}
	
	.artworks-list-item-container .artworks-item .is_top {
	    background-color: #9598ff;
	    border-radius: 6rpx;
	    color: #fff;
	    font-size: 24rpx;
	    height: 36rpx;
	    left: 0;
	    line-height: 36rpx;
	    position: absolute;
	    text-align: center;
	    top: 0;
	    width: 70rpx;
	}
	
	.artworks-list-item-container .artworks-item:nth-child(4n-3) {
	    margin-left: 0;
	}
	
	.artworks-list-item-container .artworks-item:nth-child(4n) {
	    margin-right: 0;
	}
</style>